<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-11 17:03:13
 * @Description: 
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title">
    <div slot="page_body">
      <div class="page_body">
        <div class="user_header">
          <img src="@/assets/images/user/user_bg.jpg" alt="" />
          <div class="user_info">
            <div class="cont">
              <div class="avatar">
                <img :src="member.avatar" alt="" />
              </div>
              <div class="username">{{ member.nickname }}</div>
            </div>
          </div>
        </div>
        <div class="edit_list">
          <ul>
            <li>
              <label>
                <span>姓名</span>
                <input placeholder="请输入您的姓名" v-model="member.realname" />
              </label>
            </li>
            <li>
              <label>
                <span>年级</span>
                <input placeholder="请输入您的年级" v-model="member.grade" />
              </label>
            </li>
            <li>
              <label>
                <span>就读学校</span>
                <input
                  placeholder="请输入您的就读学校"
                  v-model="member.school"
                />
              </label>
            </li>
            <li>
              <label>
                <span>校外培训机构</span>
                <input
                  :show-clear="false"
                  placeholder="请输入您的校外培训机构"
                  v-model="member.training_place"
                />
              </label>
            </li>
            <li>
              <label>
                <span>联系电话</span>
                <input
                  placeholder="请输入您的联系电话"
                  v-model="member.phone"
                />
              </label>
            </li>
            <li>
              <label>
                <span>家庭住址</span>
                <input
                  placeholder="请输入您的家庭住址"
                  v-model="member.address"
                />
              </label>
            </li>
            <!-- <li>
              <label>
                <span>身高</span>
                <input placeholder="请输入您的身高" v-model="member.height" />
              </label>
            </li>
            <li>
              <label>
                <span>户籍</span>
                <input
                  placeholder="请输入您的户籍"
                  v-model="member.household_register"
                />
              </label>
            </li>
            <li>
              <label>
                <span>性别</span>
                <label class="sex_select">
                  <popup-picker
                    title=""
                    @on-change="change_sex"
                    :data="sex_options"
                    v-model="sex_txt"
                    value-text-align="left"
                  >
                  </popup-picker
                  ><x-icon class="icon" type="ios-arrow-down"></x-icon>
                </label>
              </label>
            </li> -->

            <li>
              <input type="button" @click="post_user" value="提 交" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
import matchInc from "../plugin/match_inc";
export default {
  name: "match_detail",
  data() {
    return {
      header_title: "赛事详情",

      sex_txt: ["男"],
      sex_options: [["男", "女"]],
      member: {
        avatar: require("@/assets/images/index/logo.png"),
        username: "--",
        sex: 1
      }
    };
  },
  components: {
    commonPage,
    matchInc
  },
  created() {
    this.get_user();
    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    get_user() {
      let that = this;
      this.$axios
        .post("user.getInfo", {})
        .then(res => {
          that.member = res.result;

          that.sex_options[0].forEach((element, index) => {
            if (that.member.sex == index + 1) {
              that.sex_txt = [element];
            }
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    post_user() {
      let that = this;
      this.$axios
        .post("user.setInfo", { member: that.member })
        .then(res => {
          if (res.status == 1) {
            that.$toast({
              message: res.result.message,
              position: "bottom"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    change_sex(ids, names) {
      let that = this;
      this.sex_options[0].forEach((element, index) => {
        if (ids[0] == element) {
          this.member.sex = index + 1;
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body * {
  font-size: 0.7rem;
}

.page_body {
  margin-bottom: 1rem;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .user_header {
    position: relative;

    img {
      width: 100%;
      height: auto;
    }

    .user_info {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;

      .cont {
        text-align: center;
        color: #000;
        margin-top: 0.8rem;

        .avatar {
          border-radius: 3.5rem;
          border: 0.3rem solid #fff;
          width: 3.5rem;
          height: 3.5rem;
          display: block;
          margin: 0 auto;

          img {
            height: 3.5rem;
            width: 3.5rem;
            vertical-align: middle;
            border-radius: 3.5rem;
          }
        }

        .username {
          font-size: 1.3rem;
        }
      }
    }
  }

  .edit_list {
    background: #fff;
    border-radius: 0.5rem;
    min-height: 50%;
    width: 90%;
    margin-left: 5%;
    padding: 1rem 0;
    margin-bottom: 1rem;

    ul {
      list-style: none;

      li {
        margin: 1rem;

        label {
          border: 1px solid #eee;
          border-radius: 2.2rem;
          height: 2.2rem;
          padding-left: 1rem;
          display: flex;
          justify-content: space-between;
          height: 2.2rem;

          span {
            line-height: 2.2rem;
            font-size: 0.7rem;
          }

          input {
            border: 0;
            width: 70%;
            font-size: 0.7rem;
            border-top-right-radius: 2.2rem;
            border-bottom-right-radius: 2.2rem;
          }

          .sex_select {
            width: 70%;
            border: 0;
          }
        }

        input[type=button] {
          background: blue;
          border-radius: 2.2rem;
          height: 2.2rem;
          width: 100%;
          border: 0;
          color: #fff;
        }
      }
    }
  }
}
</style>
<style lang="stylus" >
.sex_select {
  .weui-cell {
    padding: 0;

    .weui-cell__hd {
      display: none;
    }

    .weui-cell__ft {
      display: none;
    }
  }

  div {
    width: 100%;

    div {
      width: 100%;

      .vux-cell-value {
        height: 2.2rem;
        width: 100%;
        line-height: 2.2rem;
      }
    }
  }

  .icon {
    height: 2.2rem;
    line-height: 2.2rem;
    font-size: 0.7rem;
    margin-right: 0.6rem;
  }
}
</style>